<template>
  <div class="content">
    <!-- Navbar -->
    <navBar title="问诊记录"></navBar>
    <!-- 吸顶容器 -->
    <van-tabs
      class="tabs"
      v-model:active="active"
      sticky
      lazy-render
      @change="onTabChange"
    >
      <!-- 极速问诊 -->
      <van-tab title="极速问诊">
        <van-list
          v-model:loading="orderloading"
          :finished="orderfinished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell
            :orderlist="orderlist"
            @onDelOrder="onDelOrder"
            @onCancelOrder="onCancelOrder"
          ></VanCell>
        </van-list>
      </van-tab>
      <!-- 找医生 -->
      <van-tab title="找医生">
        <van-list
          v-model:loading="findDoctorloading"
          :finished="findDoctorfinished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell :orderlist="findDoctorlist"></VanCell>
        </van-list>
      </van-tab>
      <!-- 开药问诊 -->
      <van-tab title="开药问诊">
        <van-list
          v-model:loading="prescribeloading"
          :finished="prescribefinished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <VanCell :orderlist="prescribelist"></VanCell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { getOrderList } from '@/api'
import { ref } from 'vue'
import VanCell from './components/vanCell.vue'

// Tab 标签页索引
const active = ref(0)
// true加载 false停止加载
const orderloading = ref(false)
const findDoctorloading = ref(false)
const prescribeloading = ref(false)
// ture 所有数据加载完成
const orderfinished = ref(false)
const findDoctorfinished = ref(false)
const prescribefinished = ref(false)

// 极速问诊当前页数
const orderCurrent = ref(1)
// 找医生当前页数
const findDoctorCurrent = ref(1)
// 开药问诊当前页数
const prescribeCurrent = ref(1)

// 接口数据
const params = ref({
  current: orderCurrent.value,
  pageSize: 10,
  type: 2
})

// 极速问诊列表数据
const orderlist = ref([])
// 找医生列表数据
const findDoctorlist = ref([])
// 开药问诊列表数据
const prescribelist = ref([])

// 当前点击的标签名
const currentTitle = ref('极速问诊')
// 切换标签
const onTabChange = (name, title) => {
  currentTitle.value = title
}
// 获取数据
const fetchOrderList = async (name, title) => {
  // 判断当前在哪个标签内
  if (title === '找医生' || currentTitle.value === '找医生') {
    params.value.type = 1
    params.value.current = findDoctorCurrent.value
    // 获取数据
    const res = await getOrderList(params.value)
    if (res.data.rows.length === 0) {
      findDoctorloading.value = false
      findDoctorfinished.value = true
      return
    }
    findDoctorlist.value.push(...res.data.rows)
    // 加载状态结束
    findDoctorloading.value = false
  } else if (title === '开药问诊' || currentTitle.value === '开药问诊') {
    params.value.type = 3
    params.value.current = prescribeCurrent.value
    // 获取数据
    const res = await getOrderList(params.value)
    if (res.data.rows.length === 0) {
      prescribeloading.value = false
      prescribefinished.value = true
      return
    }
    prescribelist.value.push(...res.data.rows)
    // 加载状态结束
    prescribeloading.value = false
  } else {
    params.value.type = 2
    params.value.current = orderCurrent.value
    // 获取数据
    const res = await getOrderList(params.value)
    if (res.data.rows.length === 0) {
      orderloading.value = false
      orderfinished.value = true
      return
    }
    orderlist.value.push(...res.data.rows)
    // 加载状态结束
    orderloading.value = false
  }
}

// 触底加载
const onLoad = () => {
  fetchOrderList()
  if (currentTitle.value === '找医生') {
    findDoctorloading.value = true
    findDoctorCurrent.value++
  } else if (currentTitle.value === '开药问诊') {
    prescribeloading.value = true
    prescribeCurrent.value++
  } else {
    orderloading.value = true
    orderCurrent.value++
  }
}

// 删除订单
const onDelOrder = (id) => {
  const index = orderlist.value.findIndex((item) => item.id === id)
  orderlist.value.splice(index, 1)
}

// 取消订单
const onCancelOrder = (id) => {
  const index = orderlist.value.findIndex((item) => item.id === id)
  orderlist.value[index].status = 5
  orderlist.value[index].statusValue = '已取消'
}
</script>

<style lang="scss" scoped>
.tabs{
  margin-top: 90px;
}
::v-deep .van-tabs__nav {
  .van-tab--active {
    color: unset;
    font-weight: 400;
  }
  .van-tabs__line {
    width: 40px;
    background-color: #07c160;
  }
}
::v-deep .van-cell {
  margin: 20px 25px;
  width: unset;
  border-radius: 6px;
  padding: 0;
  .head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 20px 30px;
    font-size: 30px;
    .left {
      display: flex;
      align-items: center;
      color: #121826;
      .doctorPhoto {
        margin-right: 20px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
    }
    .right {
      font-size: 28px;
      color: #848484;
    }
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 30px;
    color: #c3c3c5;
    .details {
      display: flex;
      font-weight: 300;
      .lable {
        width: 130px;
        text-align: start;
      }
      .detail {
        color: #121826;
      }
    }
  }
}
</style>
